<%-include header.html%>
<style>
.colorblock{
	width:60px;
	height:60px;
	display:inline-block;
	border-radius:4px;
	border: 1px solid #ccc;
	vertical-align: top;
	text-align:center;
}

.colorblock.active{
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 px 1px rgba(0,0,0,.075), 0 0 20px rgb(102, 195, 253);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 20px rgb(102, 195, 253);
}
</style>
<div>
<span data-color="random" class="colorblock active">
<span style="display:block;height:4em;line-height:4em;">随机</span>
</span>
<span data-color="white" class="colorblock"></span>
<span data-color="#FFFF00" class="colorblock"></span>
<span data-color="#FF9900" class="colorblock"></span>
<span data-color="#FF3300" class="colorblock"></span>
<span data-color="#66FF66" class="colorblock"></span>
<span data-color="#33CCFF" class="colorblock"></span>
<span data-color="#6633CC" class="colorblock"></span>
</div>
<br>
<div class="input-group">
  <input id="danmu" type="text" class="form-control">
  <span class="input-group-btn">
	<button id="send" class="btn btn-default" type="button">发送</button>
  </span>
</div>
<script src="/js/socket.io.js"></script>
<script>
var socket = io();
$('[name=danmu]').focus();
$('#danmu').keydown(function(e){
	if(e.keyCode==13)$('#send').click();
});
var __danmu_color=$('.colorblock.active');
$('[data-color]').each(function(){
	var jthis=$(this);
	var data_color=jthis.attr('data-color');
	
	jthis.css('background-color',data_color)
		 .click(function(){
			__danmu_color.removeClass('active');
			__danmu_color=$(this).addClass('active');
			$('#danmu').focus();
		 });
});
$('#send').click(function(){
	var danmu=$('#danmu').val().trim();
	if(!danmu)return;
	var color=__danmu_color.attr('data-color');
	if(color=='random')
	{
		var colorblock=$('[data-color]');
		color=$(colorblock[parseInt(Math.random()*(colorblock.length-1))+1]).attr('data-color');
	}
	socket.emit('newdanmu',{
		color:color,
		danmu:danmu.substr(0,120)
	});
	$('#danmu').attr("disabled",true);
	setTimeout(function(){
		$('#danmu').attr("disabled",false).val('').focus();
	},1000);
	
});
</script>
<hr>
<%-include footer.html%>